<!-- 瀑布流 -->
<template>
	<view class="waterfall">
		<uv-waterfall ref="waterfall" v-model="data_list" :add-time="10" :left-gap="10" :right-gap="10" :column-gap="10"
			@changeList="changeList">
			<!-- 第一列数据 -->
			<template #list1>
				<!-- 为了磨平部分平台的BUG，必须套一层view -->
				<view>
					<view v-for="(item, index) in list1" class="waterfall-item" @click="Router.push('/pages/square/recommend')">
						<view class="waterfall-item__image">
							<image style="width: 100%;" :src="item[coverKey]" mode="widthFix"></image>
						</view>
						<view class="waterfall-item__ft">
							<view class="waterfall-item__ft__title">
								<text class="value">{{item[titleKey]}}</text>
							</view>
							<view class="waterfall-item__ft__desc uv-line-2">
								<text class="value">{{item[descKey]}}</text>
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- 第二列数据 -->
			<template #list2>
				<!-- 为了磨平部分平台的BUG，必须套一层view -->
				<view>
					<view v-for="(item, index) in list2" class="waterfall-item">
						<view class="waterfall-item__image">
							<image style="width: 100%;" :src="item[coverKey]" mode="widthFix"></image>
						</view>
						<view class="waterfall-item__ft">
							<view class="waterfall-item__ft__title">
								<text class="value">{{item[titleKey]}}</text>
							</view>
							<view class="waterfall-item__ft__desc uv-line-2">
								<text class="value">{{item[descKey]}}</text>
							</view>
						</view>
					</view>
				</view>
			</template>
		</uv-waterfall>
	</view>
</template>
<script setup lang="ts">
	import Router from '@/utils/router'
	import { onLoad } from '@dcloudio/uni-app'
	import { computed, reactive } from 'vue';
	interface propsType {
		/** 标题key值*/
		titleKey ?: string
		/** 介绍key值*/
		descKey ?: string
		/** 封面key值*/
		coverKey ?: string
		/** 路由跳转地址*/
		url ?: string
		/** 数据列表*/
		list : object[]
	}
	const props = withDefaults(defineProps<propsType>(), {
		titleKey: 'title',
		descKey: 'desc',
		coverKey: 'url',
		list: () => {
			return []
		}
	})
	const data_list = computed(() => {
		return props.list
	})
	// 瀑布流第一列数据
	const list1 = reactive([])
	// 瀑布流第二列数据
	const list2 = reactive([])
	const changeList = (e) => {
		if (e.name == 'list1') {
			list1.push(e.value)
		} else {
			list2.push(e.value)
		}
	}
	onLoad(() => {
	})
</script>
<style>
	page {
		background: #f1f1f1;
	}
</style>
<style scoped lang="scss">
	$show-lines: 1;
	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';

	.waterfall-item {
		overflow: hidden;
		margin-top: 10px;
		border-radius: 6px;
	}

	.waterfall-item__ft {
		padding: 20rpx;
		background: #fff;

		&__title {
			margin-bottom: 10rpx;
			line-height: 48rpx;
			font-weight: 700;

			.value {
				font-size: 32rpx;
				color: #303133;
			}
		}

		&__desc .value {
			font-size: 28rpx;
			color: #606266;
		}

		&__btn {
			padding: 10px 0;
		}
	}
</style>